<template>
	<div class="search">
		<input type="text" class="searchInput" v-model="words" @keyup.enter='wordSel(words)'>
		<span class="iconfont icon-Close-small" @click="clear"></span>
		<span class="iconfont icon-search" @click="wordSel(words)"></span>
	</div>
</template>

<script>
	export default {
		props: ['word'],
		data() {
			return {
				wordList: [],
				url: '',

				words: this.word
			}
		},
		created() {

			// this.params.word = this.GetQueryString('word')
			// this.$emit('search', this.params.word)
		},
		watch:{
			word(newVal, oldVal){
				this.words = newVal;
			}
		},
		mounted() {
			console.log(this.words, 'this.words')
			// this.fetchContentSearchPage()
		},
		methods: {
			fetchContentSearchPage() {
				contentApi.fetchContentSearchPage(this.params, (res) => {
					if (res.code == "00000 00000") {
						this.wordList = res.data
					} else {

					}
				})
			},
			clear() {
				this.words = ""
			},
			wordSel(item) {
				this.$emit('search', item || this.words)
			}
		}
	}
</script>

<style scoped="scoped">
	.search {
	  display: flex;
	  align-items: center;
	}
	.search .searchInput {
	  padding: 0 16px 0 24px;
	  width: 785px;
	  height: 44px;
	  background: #FFFFFF;
	  border-radius: 4px 0px 0px 4px;
	  opacity: 1;
		font-size: 16px;
	  outline-style: none;
	  border: 1px solid #E0E0E0;
	}
	.search:hover .icon-Close-small{
		display:block;
	}
	.search .icon-Close-small {
	  font-size: 24px;
	  margin-left: -48px;
	  padding-right: 24px;
	  color: #666;
		display: none;
	}
	.search .icon-Close-small:hover {
	  color: #333;
	}
	.search .icon-search {
	  display: inline-block;
	  width: 24px;
	  height: 24px;
	  padding: 10px 16px;
	  font-size: 24px;
	  line-height: 24px;
	  color: #fff;
	  background: #FF3333;
	  border-radius: 0px 4px 4px 0px;
	  cursor: pointer;
	}
	.search .icon-search:hover {
	  opacity: 0.9;
	}

</style>